import React, { Component } from 'react'
import './shopcaritem.less'
export default class Shopcaritem extends Component {
    state={
        commentstate:0,
        commentcontent:''
    }
    componentDidMount(){
        this.setState({
            commentstate:this.props.data.commentState
        })
    }
    toComment=()=>{
        this.setState({
            commentstate:1
        })
    }
    // textarea修改事件   受控组件
    changecomment=(e)=>{
        this.setState({
            commentcontent:e.target.value
        })
    }
    //提交按钮
    tijiao=()=>{
        //关闭评论区，修改评论状态
        this.setState({
            commentstate:2
        })
        alert('评论成功,内容为：'+this.state.commentcontent)

    }
    cancel=()=>{
        //关闭评论区，修改评论状态
        this.setState({
            commentstate:0
        })
    }
    render() {
        return (
            <div>
                <div className='shopcar-item'>
                    <div className='item-pic'>
                        <img src={this.props.data.img} alt="" />
                    </div>
                    <div className='item-info'>
                        <p>商户：{this.props.data.title}</p>
                        <p>类型：{this.props.data.houseType}</p>
                        <p>价格：{this.props.data.price}</p>
                    </div>
                    <div className='item-btns'>
                        {
                            this.state.commentstate===0
                            ?
                            <button
                                className='btn bred'
                                onClick={this.toComment}
                            >评论</button>
                            :
                            this.state.commentstate===2
                            ?
                            <button className='btn bgrey'>已评论</button>
                            :
                            <button  className='btn bred'>评论中</button>
                        }
                        
                        
                        
                    </div>
                </div>
                <div 
                    className={
                        this.state.commentstate===1
                        ? 
                        'comment-box active'
                        :
                        'comment-box'
                    }
                >
                    <textarea 
                        className='comment-textarea'
                        value={this.state.commentcontent}
                        onChange={this.changecomment}
                    ></textarea>
                    <button 
                        className='btn bred'
                        onClick={this.tijiao}
                    >提交</button>
                    <button 
                        className='btn bgrey'
                        onClick={this.cancel}
                    >取消</button>
                </div>
            </div>
        )
    }
}
